<template>
  <page-frame>
    <div class="member-file">
      <div class="toptitle">
        <div class="left">会员换床-换床审批</div>
        <div class="right">
          <div class="btns">
            <el-button @click="complete">换床执行</el-button>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <div class="bedChangeApproval check-in-centre">
        <div class="step-show" @click="showStep">
          <img src="../../img/show.png" class="step-show-img" v-show="isShowStep">
          <img src="../../img/hidden.png" class="step-show-img" v-show="!isShowStep">
          {{show}}
        </div>
        <div class="steptar" v-show="isShowStep">
          <stepChange :stepData="stepData"></stepChange>
        </div>
        <div class="bedChangeApprovalContent">
          <div class="panel plan">
            <div class="panel-title">会员换床 - 费用变更</div>
            <div class="panel-content plan-meal">
              <div class="memberInfo">
                <el-row>
                  <el-col :span="8"><div class="name">会员姓名:<span v-model="costChangeData.memberName">{{costChangeData.memberName}}</span></div></el-col>
                  <el-col :span="8"><div class="编号">会员编号:<span v-model="costChangeData.memberNo">{{costChangeData.memberNo}}</span></div></el-col>
                </el-row>
              </div>
              <el-table
                :data="oldBedTableData"
                border
                style="width: 100%;margin-bottom:20px;">
                <el-table-column
                  prop="itemName"
                  label="现在床位类型"
                  width="">
                </el-table-column>
                <el-table-column
                  prop="bedInfo"
                  label="床位信息">
                </el-table-column>
                <el-table-column
                  prop="price"
                  label="床位价格">
                </el-table-column>
              </el-table>
              <el-table
                :data="newBedTableData"
                border
                style="width: 100%;margin-bottom:20px;">
                <el-table-column
                  prop="itemName"
                  label="更换后的床位类型"
                  width="">
                </el-table-column>
                <el-table-column
                  prop="bedInfo"
                  label="床位信息">
                </el-table-column>
                <el-table-column
                  prop="price"
                  label="床位价格">
                </el-table-column>
                <el-table-column
                  prop="remarks"
                  label="备注">
                </el-table-column>
              </el-table>
              <div class="info">
                <el-row>
                  <el-col :span="4"><div class="lInfro">账单总金额:<span>{{informationBill.receivable}}元</span></div></el-col>
                  <el-col :span="4"><div class="lInfro">缴费状况:<span>{{informationBill.status}}</span></div></el-col>
                  <el-col :span="4"><div class="lInfro">财务人员:<span>{{informationBill.emName}}</span></div></el-col>
                  <el-col :span="8"><div class="lInfro">收款时间:<span>{{informationBill.payTime}}</span></div></el-col>
                </el-row>
              </div>
            </div>
          </div>

          <div class="panel plan">
            <div class="panel-title">会员换床 - 审核结果</div>
            <div class="panel-content plan-meal">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span style="line-height: 36px;">审批进行中</span>
                </div>
                <div v-for="data in approvalTableData">
                  <el-row>
                    <el-col style="padding-left:10px;margin:10px 0;">{{data.sortName}}</el-col>
                  </el-row>
                  <div class="member-process-approval-item">
                    <el-row>
                      <el-col :span="6">
                        <span>申请时间:</span>
                        <span v-model="data.applicationTime">{{data.applicationTime}}</span>
                      </el-col>
                      <el-col :span="6">
                        <span>审核时间:</span>
                        <span v-model="data.approvalTime">{{data.approvalTime}}</span>
                      </el-col>
                      <el-col :span="4">
                        <span>审核人:</span>
                        <span v-model="data.approverName">{{data.approverName}}</span>
                      </el-col>
                      <el-col :span="2">
                        <span v-model="data.approvalWayName">{{data.approvalWayName}}</span>
                      </el-col>
                      <el-col :span="5">
                        <span>审核结果:</span>
                        <span v-model="data.result">{{data.result}}</span>
                      </el-col>
                    </el-row>
                  </div>
                </div>
              </el-card>
            </div>
          </div>
        </div>
      </div>
    </div>
  </page-frame>
</template>

<script>
  import stepChange from '../../components/stepbar/change.vue';
  import commonApi from '../../service/member/commonApi';
  import financialCenterApi from '../../service/finance/financeCenterApi';
  import commonJs from '../../config/common';
  export default {
    methods: {
      init(){
        this.currentMemberObj = this.$route.params.memberObj;
        this.getCheckInApprovalResult();
        this.loadTableData();
      },
      loadTableData(){
        let self = this;
        let row = self.currentMemberObj;
        self.getBedInfoByMemberId(row.memberId);
        //获取费用变更数据memberId,actId,viewBed
        self.getCostChange(row.memberId,row.actId);
        //获取审核结果
        self.getCheckInApprovalResult();
      },
      complete(){
        let self = this;
        self.stepData = 3;
        commonApi.getFlowRouter("bedChange",self.currentMemberObj.actId,"").then(
          (response)=>{
          if(response.data.status!=200){
              this.$message({
                type: 'error',
                message: response.data.data.message
              });
          }else{
              this.$router.push({name:"changeBed03",params:{memberObj: this.currentMemberObj}});
          }
        }
      );
      },
      getBedInfoByMemberId(memberId){
        let self = this;
        financialCenterApi.getBedInfo(memberId).then((response)=>{
          self.bedInfos =  response.data.data;
        })
       },
      /**
       * 获取费用变更
       */
      getCostChange(memberId,actId){
        let self = this;
        commonApi.getAccountBillByAct(memberId,actId,1).then(
          (response)=>{
            self.costChangeData.memberName = response.data.data.memberDTO.memberName;
            self.costChangeData.memberNo = response.data.data.memberDTO.memberNo;
            self.oldBedTableData = response.data.data.currentExpenseItemDTOList;
            self.newBedTableData = response.data.data.accountExpenseItemDTOList;
            for(let i=0;i<self.oldBedTableData.length;i++){
              self.oldBedTableData[i].bedInfo = self.bedInfos[0].bedNo;
            }
            for(let i=0;i<self.newBedTableData.length;i++){
              self.newBedTableData[i].bedInfo = self.bedInfos[1].bedNo;
              self.newBedTableData[i].remarks = commonJs.formateDateToTime(response.data.data.accountBillDTO.changeDate)
                +'-'
                +commonJs.formateDateToTime(response.data.data.accountBillDTO.dueDate)
                +'('+self.newBedTableData[i].typeName+')';
            }

            self.informationBill = response.body.data.accountBillDTO ;
            self.memberDTO=response.body.data.memberDTO ;
            self.accountDTO=response.body.data.accountDTO ;
            if(self.informationBill.status==1){
              self.informationBill.status="已缴费";
            }else{
              self.informationBill.status="未缴费";
            }
          }
        );
      },
      //显示或者隐藏流程图
      showStep(){
        this.isShowStep =  !this.isShowStep;
        (this.isShowStep == false) ? (this.show = "显示流程图"):(this.show = "隐藏流程图");
      },
      /**
       * 获取会员退住审核结果
       */
      getCheckInApprovalResult(){
        let self = this;
        commonApi.getApprovalResult(self.currentMemberObj.actId).then(
          (response)=>{
            self.approvalTableData = response.data.data ;
          }
        );
      },
    },
    components: {
      stepChange
    },
    mounted: function () {
      this.init();
    },
    data() {
      return {
        currentMemberObj:{},
        stepData:2,
        costChangeData:{
          memberName:'',
          memberNo:'',
        },
        newBedTableData:[],
        oldBedTableData:[],
        bedInfos: [],
        approvalTableData:[{
          createTime:"2016-10-01",
          endTime:"2016-10-02",
          assigneeName:"沙瑞金",
          operationType:1,
          status:0,
        },{
          createTime:"2016-10-02",
          endTime:"2016-10-03",
          assigneeName:"瑞金",
          operationType:1,
          status:1,
        }],
        activeNo:2,
        informationExpenseItem:[],
        informationBill:{},
        memberDTO:{},
        accountDTO:{},
        isShowStep:false,
        show:"显示流程图",
      }
    },
  }
</script>
<style>


  .bedChangeApproval .bedChangeApprovalContent .bar{
    margin-bottom:18px;
    margin-top: 50px;
  }
  .bedChangeApproval .bedChangeApprovalContent .review .el-row{
    height:36px;
    line-height:36px;
    width:100%;
    background-color:#eef1f6;
    margin-bottom:5px;
  }
  .bedChangeApproval .bedChangeApprovalContent .review .reviewItem .step{
    margin-bottom: 8px;
    font-size: 13px;
    color: #a8a8b0;
  }
  .bedChangeApproval .el-form-item__label{
    width: 70px!important;
  }
  .bedChangeApproval .el-form-item__content{
    margin-left: 0px!important;
  }
  .bedChangeApproval .el-form-item{
    margin-right: 30px;
  }
  .bedChangeApproval .el-table{
    width: 70%!important;
  }
  .bedChangeApproval .memberInfo{
    font-size: 13px;
    margin-bottom: 10px;
  }
  .bedChangeApproval .el-card__header{
    padding: 3px 20px;
  }
  .bedChangeApproval .text {
    font-size: 14px;
    background-color: #F5FBFF;
    border-bottom: 1px solid #ffffff;
    position: relative;
  }
  .bedChangeApproval .item {
    padding: 15px 20px;
  }
</style>
